<template>
  <div class="SiteContainer">
    <template v-if="data">
      <div class="avatar">
        <Avatar url="https://www.baidu.com/link?url=cI3qX54ebhWWOpxhTD0T_Y0eUCBjU9Y3phIb59nkw7CYVJm7Tc8dLNmn2H88Hs7oBQpAlhmTNTipBmfi_uCxk5loqXDRIhsAhsPNQj2xuYFEi41xJzMwCO-TYNmfX2L21rhEKJD7LuBujftF8hSb39k5i6xkYVdEuAjQtRfhNFkuSSbNGdadyiRBd7mHjDQThWovY9pZaK2LAXZXAhqPdiYohTaopoQM35bPyDMLIsWGyAXx06HnTGPU2oKdSMMQ9jbV-fu_MKzKrE7OpsZyOEmm50wYNbMXT1y8dIZTBEo3zo5sDlj_afT6BskC4wnCZqTv4nMWuB9dGN2OzuWs8q3dC8Ot9VKUjgUKHPJzW9-rMojDnHFnWqPwd4AQE1F2Dm0kFf-dmIDB77YxGCZmgnZbqfHhHDfLKjcqOiyCe0iRRjaICZrq3mwbSGrEpJNuXDdCb1yMXePbrwHV9oSgfl9qqPrxbVLk09aTNJOv_g7GZxkq5vFNGeFZJtCXtSzuJchF264PHOS0a8Zy6cZp5S8WqkQxx9VhKz7Xr0wJzVPzzDcQBK5XbaAHi4pkeD3F8fYk9v1qXYF8_GIf91Ats6G1Ot9WT_EbR6-v4DRMcG3&wd=&eqid=f70152b900016dcb0000000361442b5a" size="150" />
      </div>
    </template>

    <h1 v-if="data" class="title">{{ data.siteTitle }}</h1>
    <Menu v-if="data" />
    <Contact v-if="data" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Contact from "@/components/Contact";
import Avatar from "@/components/Avatar";
import Menu from "@/components/Menu";
export default {
  components: {
    Contact,
    Avatar,
    Menu,
  },
  computed: {
    ...mapState("setting", ["data"]),
  },
};
</script>

<style lang="less" scoped>
@import url("~@/style/global.less");
.SiteContainer {
  height: 100vh;
  background: #202020;
  padding: 20px 0 0 0;
  box-sizing: border-box;
  overflow-x: hidden;
  overflow-y: auto;
  .avatar {
    display: flex;
  }
  .title {
    margin: 0;
    font-size: 16px;
    color: #fff;
    text-align: center;
    margin-top: 5px;
  }
}
</style>